<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%"
    >
    <el-table-column
      prop="id"
      label="编号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="名称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="price"
      label="单价">
    </el-table-column>
    <el-table-column
      prop="num"
      label="数量"
      >
       <el-button @click="reduce(id)">-</el-button>
       <span  v-for="item in tableData" :key="item.id">{{item.num}}</span>
  
        <el-button @click="add(id)">+</el-button>
    </el-table-column>
    <el-table-column
      prop="total"
      label="小计"
      >
      <span v-for="item in tableData" :key="item.id"></span>
      
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
     data() {
      return {
        total:0,
        tableData: [{
          id: 1,
          name: "apple",
          price: 3,
          num:1,
        }, {
          id: 2,
          name: "pear",
          price: 4,

        }, {
          id: 3,
          name: "banana",
          price: 5,
       
        }]
      }
    },
  
  mounted () {
      // this.tableData.forEach(v=>{
      //    v.num=1
      //    console.log(this.tableData);
      // })    
      
    },
    methods:{
      reduce(id){
        this.tableData.forEach(v=>{
          if(v.id==id){
            if(v.num>1){
              v.num-=1
            }
          }
        })
        console.log(1111);
      },
      add(id){
         this.tableData.forEach(v=>{
          if(v.id==id){
              v.num+=1
           
          }
        })
        console.log(2222);
      }
    }
  }
</script>

<style lang="less" scoped>

</style>